<script setup lang="ts">
import VChart from 'vue-echarts'
import 'echarts'
import { computed, onMounted, ref } from 'vue'
import { getMaturityRateData } from '@/api/cropGrowthIndicatorsController.ts'

// 响应式数据：存储字段名和指标数据
const fieldName = ref<string[]>([])
const fieldData = ref<number[][]>([])

const fetchData = async () => {
  try {
    const res = await getMaturityRateData()
    const data = res.data.data || {}
    // 赋值：字段名 + 三个指标数据（已成熟、半成熟、未成熟）
    fieldName.value = data.fieldNames || []
    fieldData.value = [
      data.maturityRipeRatios || [], // 已成熟数据
      data.maturitySemiRipeRatios || [], // 半成熟数据
      data.maturityUnripeRatios || [], // 未成熟数据
    ]
  } catch (error) {
    console.error('数据获取失败:', error)
    fieldName.value = []
    fieldData.value = []
  }
}

// 计算 ECharts 配置（直接使用后端返回的百分比数值）
const options = computed(() => {
  const rawData = fieldData.value
  const xAxisData = fieldName.value

  // 空值保护：无数据时返回空配置
  if (rawData.length === 0 || xAxisData.length === 0) {
    return {
      legend: { selectedMode: false },
      grid: { left: 100, right: 100, top: 50, bottom: 50 },
      yAxis: { type: 'value' },
      xAxis: { type: 'category', data: [] },
      series: [],
    }
  }

  return {
    legend: { selectedMode: false },
    grid: { left: 100, right: 100, top: 50, bottom: 50 },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}%', // Y 轴标签显示 %
      },
      max: 100, // 限制 Y 轴最大值为 100%（可选，根据实际需求调整）
    },
    xAxis: { type: 'category', data: xAxisData },
    series: ['已成熟', '半成熟', '未成熟'].map((name, index) => ({
      name,
      type: 'bar',
      stack: 'total',
      barWidth: '60%',
      label: {
        show: true,
        formatter: (params: any) => {
          // 处理数值异常（确保是数字）
          const value = Number(params.value)
          return `${isNaN(value) ? 0 : value.toFixed(1)}%`
        },
      },
      data: rawData[index], // 直接使用后端返回的百分比数值
    })),
  }
})

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="data-maturity-rate-analyze">
    <a-card title="成熟率分析">
      <v-chart :option="options" style="height: 60vh; max-width: 100%" />
    </a-card>
  </div>
</template>

<style scoped></style>
